<template>
  <div class="calendar">
    <h2>校历</h2>
    <div class="search mb-20">
      <Input
        style="width:20%"
        v-model.trim="keyword"
        search
        enter-button
        @enter="searchList"
        @on-search="searchList"
        placeholder="搜索用户名、工号、姓名"
      />
    </div>
    <div class="bt-opera mb-10">
      <Button class="cb-icon" icon="md-add" @click="showCalerdar(false)">新增</Button>
      <ButtonGroup>
        <Button class="cb-icon" icon="md-cloud-upload">导出</Button>
        <Button class="cb-icon" icon="md-exit">导入</Button>
        <Button class="cb-icon" icon="ios-trash">删除</Button>
      </ButtonGroup>
    </div>
    <!--loading公共属性 -->
    <Table
      border
      ref="selection"
      :loading="$store.loading"
      size="small"
      :columns="columns"
      :data="tableData"
    ></Table>
    <Page
      class="mt-10"
      :total="total"
      show-sizer
      @on-change="pageNumChange"
      @on-page-size-change="pageSizeChange"
      show-total
    />
    <!--新增 -->
    <AddCalendar v-model="calenderModal" :edit.sync="edit" @on-update="getList"></AddCalendar>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { Tools } from "@/model/tools.ts";
import { ParamData } from "@/store/interface.ts";
import { queryData } from "@/api/service.js";
import AddCalendar from "@views/AddCalendar.vue";
import { BASE64 } from "@utils/tools.ts";
@Component({
  components: {
    AddCalendar
  }
})
export default class DataCalendar extends Tools {
  private calenderModal: boolean = false;
  private total: number = 0;
  private keyword: string = "";
  private edit: boolean = false; // 新增 or 编辑
  // 请求参数封装对象
  private calendar: ParamData = {
    type: "schoolCalendar",
    criteria: "",
    includeAttributes: [],
    pageNumber: 1,
    pageSize: 10
  };
  private tableData: Array<any> = [];
  private columns: Array<any> = [
    {
      type: "selection",
      width: 60,
      align: "center"
    },
    {
      title: "代码",
      key: "code"
    },
    {
      title: "名称",
      key: "name"
    },
    {
      title: "学年",
      key: "semesterYear"
    },
    {
      title: "学期",
      key: "semesterNumber"
    },
    {
      title: "周数（周）",
      key: "weeks"
    },
    {
      title: "开始结束日期",
      key: "dateStart",
      render: (h, params) => {
        //return返回
        return h("div", [h("span", params.row.dateStart + " ~ " + params.row.dateEnd)]);
      }
    },
    {
      title: "操作",
      key: "action",
      align: "center",
      render: (h, params) => {
        return h("div", [
          h(
            "Span",
            {
              props: { type: "text", size: "small" },
              class: { hasSplit: true },
              on: {
                click: () => {
                  this.showCalerdar(true); //编辑
                }
              }
            },
            "编辑"
          ),
          h(
            "Span",
            {
              props: { type: "text", size: "small" },
              class: { hasSplit: true },
              on: {
                click: () => {}
              }
            },
            "查看详情"
          ),
          h(
            "Span", // 注意大写
            {
              props: { type: "text", size: "small" },
              class: { hasSplitLast: true },
              on: {
                click: () => {}
              }
            },
            "删除"
          )
        ]);
      }
    }
  ];
  showCalerdar(isEdite) {
    this.calenderModal = true;
    this.edit = isEdite;
  }
  async getList() {
    let [err, data] = await queryData(this.calendar);
    this.commLoading(false);
    if (err) {
      let msg = err.msg || "获取列表数据信息异常";
      this.$Message.error(msg);
      return;
    }
    this.total = data.totalSize;
    this.tableData = data.rows;
  }
  searchList() {
    let keyword = BASE64.encode(JSON.stringify([["name", "ilike", this.keyword]]));
    this.calendar.criteria = keyword; //模糊查询
    this.getList();
  }
  pageNumChange(num) {
    this.calendar.pageNumber = num;
    this.getList();
  }
  pageSizeChange(num) {
    this.calendar.pageSize = num;
    this.getList();
  }
  mounted() {
    this.getList();
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.calendar {
  .bt-opera {
    display: flex
    justify-content: space-between
  }
}
</style>
